class RoleForSaveModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            role: {},
            nodes: {}
        };
        this.level = 0;
    }

    componentDidMount() {
        this.dataInit();
    }

    dataInit(){
        postJson("/role/getRoleList.x", null, (data) => {
            for (let i = 0; i < data.data.length; i++)
                data.data[i].roleExp = data.data[i].roleExp + " 【" + data.data[i].roleName + "】";

            let nodes = this.refs.treeModal.getNodes(data.data, null, 'roleParent', 'roleName', 'roleDisplay');
            this.setState({nodes: nodes});
        });
    }

    addRole() {
        postJson("/role/save.x", this.state.role, () => {
            layui.layer.msg("添加角色成功!");
            if (this.props.onRoleCreated)
                this.props.onRoleCreated();
        });
    }

    inputOnChange(name, value) {
        let role = this.state.role;
        role[name] = value;
        this.setState({role: role});
    }

    clearForm() {
        this.setState({role: emptyObj(this.state.role)});
    }

    show(){
        this.refs.modal.show();
    }

    close(){
        this.refs.modal.close();
    }

    render() {
        console.log("roleCode",this.state.role);
        return (
            [
                <Modal ref="modal">
                    <Form type="pane" size="sm">
                        <Item>
                            <Label>角色名称</Label>
                            <Input placeholder="请输入英文" value={this.state.role.roleName}
                                   onChange={(value) => this.inputOnChange('roleName', value)}/>
                        </Item>

                        <Item>
                            <Label>中文名称</Label>
                            <Input placeholder="请输入中文名称" value={this.state.role.roleDisplay}
                                   onChange={(value) => this.inputOnChange('roleDisplay', value)}/>
                        </Item>

                        <Item>
                            <Label>父角色</Label>
                            <ButtonInput ref="parentInput" size="sm" value={this.state.role.roleParent} onChange={(value) => this.inputOnChange('roleParent',value)}
                                         onClick={()=>{this.refs.treeModal.show({typeData:this.refs.parentInput.inputRef})}}></ButtonInput>
                        </Item>

                        <Item>
                            <Label>角色描述</Label>
                            <Input value={this.state.role.roleExp} onChange={(value) => this.inputOnChange('roleExp', value)}/>
                        </Item>
                        <Item>
                            <Button formBtn="true" size="sm" onClick={() => this.addRole()}>保存</Button>
                        </Item>
                    </Form>
                </Modal>,
                <TreeModal ref="treeModal" nodes={this.state.nodes} onSelected={(string,data)=>{
                    this.refs.parentInput.value = data.roleName;
                }}></TreeModal>
            ]
        )
    }
}
